<template>
	<page ref='page'>
		<view class="page">
			<view class="tab_row" v-if="vgtTab && vgtTab.length > 0">
				<vgt-tab :list="vgtTab" @onValueChange="vgtChange"></vgt-tab>
			</view>
			<view class="tab-content" v-if=" list && list.length > 0">
				<view class="MlSon" v-for="item in list" :key="item.id" @click="onDetails(item)">
					<view class="MlSonvBox">
						<view class="SonOfImg">
							<image class="Img" :src="item.cover" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="SonOfName">
						<view class="SNTop">
							{{item.title}}
						</view>
						<view class="SNTop2">
							<text>{{item.address_name}}</text>
						</view>
						<view class="SNTop2">
							<text>{{item.type}}</text>
							<text  style="margin-left: 14rpx;display: inline-block;word-break: break-all;">{{item.centiare ? Number(item.centiare) +'㎡' : 0 + '㎡'}}</text>
						</view>
						<view class="SNBom">
							<view class="SNBom_left">
								<image class="SNBom_img" :src="item.avatar == ''? item.users.avatar: item.avatar " mode="scaleToFill"></image>
								<view class="SBleft">
									<text>{{item.shopping_name != '' ? item.shopping_name  : item.users.name}}</text>
									<!-- <text style="margin-left: 14rpx;">{{item.type}}</text> -->
									
									<!-- <text class="square">2</text> -->
								</view>
								
								<view class="SNBom_right">
									<image class="SBright_img"
										src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/ZbR1Yj4NNP4VKOdAB2eGJavDG0rck7UOqKroJemp.png">
									</image>
									<view class="SBright">
										{{item.look_num}}
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<block v-else-if="!loading">
				<view class="" style="min-height: 60vh;"></view>
				<empty status="2"/>
			</block>
			<foot></foot>
		</view>
	</page>
</template>

<script>
	import {
		getDesign,
		getDesignNav
	} from "@/utils/getRequest.js"
	import vgtTab from '@/components/vgt-tab/vgt-tab.vue'
	export default {
		components: {
			vgtTab
		},
		data() {
			return {
				vgtTab: [],
				nav_id: '',
				list: [],
				page: 1,
				size: 10,
				total: 0,
				loading: false,
				shopping_id:'',
			}
		},
		methods: {
			onDetails(row) {
				uni.navigateTo({
					url: '/pagesHome/designCase/details?id=' + row.id
				})
			},
			vgtChange(e) {
				this.nav_id = e.currentInd;
				this.page = 1
				this.getDesignList();
			},
			async getDesignList() {
				this.loading = true
				if (this.page == 1) uni.showLoading()
				try {
					var res = await getDesign({
						shopping_id: this.shopping_id,
						nav_id: this.nav_id,
						page: this.page,
						limit: this.size
					})
					this.list = this.page == 1 ? res.list : [...this.list, ...res.list]
					this.total = res.count
					if (this.page == 1) uni.hideLoading()
					this.loading = false
				} catch {
					this.loading = false
					uni.hideLoading()
				}
			},
			getDesignNav() {
				this.loading = true
				getDesignNav().then(res => {
					this.loading = false
					let arr = [{
						name: '全部',
						id: ''
					}]
					let arrs = arr.concat(res)
					this.vgtTab = arrs;
				}).catch(() => {
					this.loading = false
				})
			}
		},
		onLoad(parms) {
			if(parms.shopping_id)this.shopping_id = parms.shopping_id;
			this.getDesignNav();
			this.getDesignList();
		},
		onShow() {
			var option = this.$global.$editUploadBack(4, 'designCaseLook')
			if (option && option.id && this.list.findIndex(x => x.id == option.id) != -1) {
				this.list[this.list.findIndex(x => x.id == option.id)].look_num = Number(this.list[this.list.findIndex(x =>
					x.id == option.id)].look_num) + 1
			}
		},
		onReachBottom() {
			if (this.loading || this.size * this.page >= this.total) return
			this.page++
			this.getDesignList()
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		width: 750rpx;
		padding-bottom: 40rpx;
	}

	.tab_row {
		padding: 0 36rpx;
	}

	// 底部内容站位区域  此处内容请自定义  以下为内容区域 样式
	.tab-content {
		// height: 100vh;
		background: #fff;
		padding: 20rpx 36rpx 0;
		display: flex;
		    flex-wrap: wrap;
		    flex-direction: row;
		    justify-content: space-between;
		    align-items: center;

		.MlSon {
			width: 48%;
			margin: 0px 0rpx 36rpx 0rpx;
			    flex: 0 0 48%;
			    display: inline-block;
			box-shadow: 0 1px 5px 0px #dcdcdc;
			    border-radius: 9px;

			.MlSonvBox {
				width: 100%;

				.SonOfImg {
					width: 100%;
					height: 406rpx;
					border-radius: 22rpx;

					.Img {
						width: 100%;
						height: 100%;
						border-radius: 22rpx;
					}
				}
			}

			.SonOfName {
				// width: 100%;
				// margin-top: 20rpx;
				padding: 10px 10px;
				.SNTop {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #000000;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.SNTop2{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					line-height: 20px;
				}

				.SNBom {
					width: 100%;
					margin-top: 10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.SNBom_left {
						// width: calc(100% - 120rpx);
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;

						.SNBom_img {
							width: 44rpx;
							height: 44rpx;
							border-radius: 50%;
						}

						.SBleft {
							// max-width: calc(100% - 54rpx);
							white-space: nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
							word-break: break-all;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #adadad;
							// margin-left: 14rpx;

							text {
								display: inline-block;
								word-break: break-all;
							}

							.square {
								font-size: 30rpx;
								display: inline-block;
								transform: scale(0.6) translateY(-10%);
								word-break: break-all;
							}
						}
					}

					.SNBom_right {
						display: flex;
						align-items: center;

						.SBright_img {
							margin-left: 4rpx;
							width: 28rpx;
							height: 18rpx;
						}

						.SBright {
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							color: #adadad;
							margin-left: 5rpx;
						}
					}
				}
			}
		}
	}
</style>
